// 横向项目
<template>
  <div class="module_">
      <el-tabs v-model="activeName"  class="tabs" type="card">
        <el-tab-pane label="合同一览" name="1"></el-tab-pane>
        <el-tab-pane label="合同变更" name="2"></el-tab-pane>
        <el-tab-pane label="合同结项" name="3"></el-tab-pane>
      </el-tabs>
      <transition name="el-fade-in">
        <component v-bind:is="choseComp" ref="comp"></component>
      </transition> 
  </div>
</template>

<script>
import htglance from '../components/htglance' 
import htchange from '../components/htchange.vue'
import htclosing from '../components/htclosing.vue'


export default {
    name:'project_personalTransverse',
    components:{
       htglance,
       htchange,
       htclosing,
    },
    data(){
        return{
            activeName: '1',
            options:{
                '1': htglance,
                '2': htchange,
                '3': htclosing,
            }
        }
    },
    computed:{
        choseComp(){
            return this.options[this.activeName]
        },
        editFormVisible(){
            return this.$refs.comp.editFormVisible
        },
    },
    mounted(){
        const activeName = this.$route.query.activeName
        if(activeName  && this.options[activeName]) {
            this.activeName = activeName
        }
    },
    methods:{
        submit(){
            return this.$refs.comp.submit()
        }
    }
}
</script>

<style>

</style>